<template>
	<view class="container">
		<!-- <view class="lists"> -->
		<view class="list">
			<view class="lift">
				头像
			</view>
			<view class="liri">
				<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
					:maxCount="1">
				</u-upload>
			</view>
		</view>

		<view class="list">
			<view class="lift">
				昵称
			</view>
			<view class="liri">
				<input class="la" type="text" v-model="infos.nickname">
				<u-icon name="arrow-right" color="#999999" size="16"></u-icon>
			</view>
		</view>
		<view class="list" @click="showa = true">
			<view class="lift">
				性别
			</view>
			<view class="liri">
				<view class="la">
					{{sex}}
				</view>
				<u-icon name="arrow-right" color="#999999" size="16"></u-icon>
			</view>
		</view>

		<!-- 选择性别 -->
		<u-picker :show="showa" :columns="columns" @confirm="confirm" @cancel="cancel"></u-picker>

		<!-- </view> -->


		<view class="btn" @click="put">
			保存
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showa: false,
				showb: false,
				columns: [
					['男', '女']
				],
				sex: '',
				infos: '',
				fileList1: []
			}
		},
		onLoad() {
			this.gitinfo()
		},
		methods: {
			// 图片处理
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式

				let lists = [].concat(event.file)
				// console.log(lists)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})

				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					if (result) {
						let item = this[`fileList${event.name}`][fileListLen]
						this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
							status: 'success',
							message: '',
							url: this.$oss(result),
							ful: result
						}))
						fileListLen++
					} else {
						this[`fileList${event.name}`].splice(fileListLen, 1)
					}

				}



			},
			uploadFilePromise(url) {
				let that = this
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: that.$uploadUrl, // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							type: 'image',
							token: uni.getStorageSync('token')
						},
						success: (res) => {
							let data = JSON.parse(res.data)

							if (res.statusCode === 200 && data.code === 1 && data.data) {
								resolve(
									data.data.url
								)

							} else {
								resolve()
							}

						},
						fail: (e) => {
							console.log(e)
						}
					});
				})
			},
			// 关闭弹窗
			cancel() {
				this.showa = false
			},
			confirm(e) {
				this.sex = e.value[0],
					this.infos.gender = e.indexs[0],
					this.showa = false
			},
			// 获取信息
			gitinfo() {
				this.$api.post('/updateuser', {}).then(res => {
					if (res.code == 1) {
						// console.log(res.data)
						this.infos = res.data
						if (res.data.gender === 0) {
							this.sex = '男'
						} else {
							this.sex = '女'
						}
						if (res.data.avatar) {
							if (res.data.avatar.substring(0, 3) == 'data') {
								console.log(res.data.avatar)
								let a = '/uploads/image/20220801/315d85e4df70d1eed705a4f760a67902.jpg';
								this.fileList1 = [{
									url: this.$oss(a)
								}]
							} else {
								this.fileList1 = [{
									url: this.$oss(res.data.avatar)
								}]
							}
						}

					}
				}).catch((res) => {

				})
			},
			// 提交信息
			put() {
				if(this.fileList1.length === 0){
					this.$toast('请上传头像')
					return
				}
				this.$api.post('/updateuser', {
					type: 'update',
					avatar: this.fileList1[0].ful,
					nickname: this.infos.nickname,
					gender: this.infos.gender
				}).then(res => {
					if (res.code == 1) {
						this.$toast(res.msg);
						setTimeout(() => {
							this.$back();
						}, 1000)
					}
				}).catch((res) => {
					console.log(res)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #f5f5f5;

		/deep/ .u-upload__button {
			background-color: #e8e8e8;
		}

		/deep/ .u-upload__wrap__preview__image {
			width: 50px !important;
			height: 50px !important;
		}

		/deep/ .u-upload__button {
			width: 50px !important;
			height: 50px !important;
		}

		/deep/ .u-upload {
			flex: none;
		}

		// .lists {
		// 	margin: auto;
		// 	margin-top: 40rpx;
		// 	width: 690rpx;
		// 	background: #FFFFFF;
		// 	border-radius: 20px;

		// .list:last-child {
		// 	border: 0rpx;
		// }

		.list {
			// padding: 40rpx 20rpx;
			margin: 30rpx 0rpx;
			padding: 30rpx;
			background: #FFFFFF;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid #EDEDED;

			.lift {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}


			.liri {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: flex-end;
				flex: 1;


				.la {
					margin-bottom: 5rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #999999;
					flex: 1;
					text-align: right;
				}

				.lt {
					width: 80rpx;
					height: 80rpx;
					background: #838383;
					border-radius: 8rpx;
				}

			}
		}


		// 修改昵称
		.discu {
			width: 700rpx;
			height: 500rpx;
			border-radius: 20rpx;

			.dis_tit {
				margin-top: 30rpx;
				text-align: center;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}

			.dis_text {
				width: 650rpx;
				height: 200rpx;
				margin: 0 auto;
				margin-top: 20rpx;
			}

			.btn {
				margin: 0 auto;
				margin-top: 30rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 650rpx;
				height: 80rpx;
				border-radius: 10rpx;
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				background: linear-gradient(270deg, #26C89F, #38DEB4);
			}
		}

		// }

		// 个人相册
		.photo {
			margin: 40rpx 30rpx 30rpx 30rpx;
			display: flex;
			flex-direction: column;

			.pti {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}

			.uplo {
				margin-top: 20rpx;
			}
		}

		.btn {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			height: 115rpx;
			border: 49rpx;
			border: 1rpx solid rgba(1, 187, 140, 0.6000);
			box-shadow: 0rpx 0rpx 19rpx 1rpx rgba(28, 133, 82, 0.2500);
			border-radius: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 50rpx auto 0;
			width: 630rpx;
			background: #26C89F;
		}
	}
</style>
